<template>
	<view>
		<u-form :model="loginForm" ref="myForm" :error-type="errorTypes" :labelWidth="0">
			<u-form-item prop="username">
				<u-input 
					placeholder="请输入账号" 
					border="none" 
					prefixIcon="account"
					v-model="loginForm.username" 
					clearable 
					prefixIconStyle="font-size: 48rpx;color: #909399" 
				/>
			</u-form-item>
			<u-form-item prop="password">
				<u-input 
					:password="isView"
					clearable 
					border="none" 
					placeholder="请输入密码" 
					prefixIcon="lock" 
					v-model="loginForm.password" 
					prefixIconStyle="font-size: 48rpx;color: #909399" 
				>
					<template slot="suffix">
						<u-icon :name="isView?'eye-off':'eye-fill'" size="26" @click="isView = !isView"></u-icon>
					</template>
				</u-input>
			</u-form-item>
		</u-form>
		<view class="mt-80">
			<ProtocolOptions @checkeVal="handleCheckeVal" />
		</view>
		<view class="mt-80">
			<u-button type="primary" @click="submit">立即登录</u-button>
		</view>
		
	</view>
</template>

<script>
	import ProtocolOptions from "./ProtocolOptions.vue"
	import {mapState, mapMutations} from 'vuex'
 export default {
	 components: {
		 ProtocolOptions
	 },
	 computed: {
	 	...mapState(['hasLogin,userInfo'])
	 },
	 data () {
		 return {
			 loginForm: {
				 username: "",
				 password: ""
			 },
			 isView: true,
			 isCheck: false,
			 errorTypes: ['toast'],
			 rules: {
					username: [
						{ required: true, message: '请输入账号', trigger: ['blur', 'change'] }
					],
					password: [
						{ required: true, message: '请输入密码', trigger: ['blur', 'change'] }
					]
				}
		 }
	 },
	 onReady() {
	 	this.$refs.myForm.setRules(this.rules);
	 },
	 methods: {
	 ...mapMutations(['login']),
		handleCheckeVal(val){
			this.isCheck = val
			console.log("this.isCheck", this.isCheck)
		},
		submit(){
			let that = this
			if(!that.isCheck){
				uni.showToast({
					title: '请阅读并同意《隐私政策》和《产品服务协议》',
					duration: 3000,
					icon: "none"
				});
			}else {
				that.$refs.myForm.validate().then(valid=>{
					that.$api.GetJwtToken(that.loginForm).then(res=>{
						that.login({...res.data.store, shop_appid: res.data.token})
						uni.switchTab({
							url: '/pages/index/index'
						});
					})
				})
			}
		}
	 }
 }
</script>

<style>
</style>